<template>
	<div>
		{{ newNum }}<br />
		{{ newUser }}<br />
		<button @click="user.job = 'javaEE'">java升级成javaEE</button>
		<ul>
			<li :key="index" v-for="(item, index) in newList">
				<h3>{{ item.name }}</h3>
				<ul>
					<li :key="_index" v-for="(_item, _index) in item.children">
						{{ _item.name }}
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		// 1. 纯数字前面加一个￥199
		// 2. 后端给个对象，前端需要拼接成一段内容
		// 3. 对一个数组进行处理，过滤
		return {
			list: [
				{
					id: '0',
					name: '北京',
					children: [{ id: '001', name: '朝阳' }],
				},
				{
					id: '1',
					name: '南京',
					children: [{ id: '101', name: '玉华' }],
				},
				{
					id: '2',
					name: '西安',
					children: [{ id: '201', name: '大雁塔' }],
				},
			],
			num: 199,
			user: {
				name: '小李',
				age: 26,
				job: 'java',
			},
		}
	},
	computed: {
		newList() {
			// 把id为 ’0‘ 的过滤掉
			return this.list.filter((item) => item.id !== '0')
		},
		newUser() {
			const { name, age, job } = this.user
			return name + '今年' + age + '岁了' + '工作是' + job
		},
		newNum() {
			return '￥' + this.num
		},
	},
}
</script>
